<template>
  <!-- 修改 -->
  <a-modal
      v-model:open="props.updateValueVisible"
      :title="title"
      class="addStation"
      destroyOnClose
      :width="520"
      @cancel="cancel"
      centered
  >
    <a-form
        :model="form"
        layout="inline"
        :labelCol="labelCol"
        ref="formRef"
    >
      <a-form-item label="参数初始值" name="value">
        <a-input
            v-model:value="form.value"
            class="formInput"
            placeholder="参数初始值"
        />
      </a-form-item>
      <a-form-item label="计算公式" name="calcFormula">
        <a-tooltip placement="right" >
          <template #title>{{form.calcFormula}}</template>
          <a-input
              v-model:value="form.calcFormula"
              class="formInput"
              placeholder="计算公式"
          />
        </a-tooltip>
      </a-form-item>
      <a-form-item label="状态" name="enable">
        <a-select v-model:value="form.enable" class="formInput">
          <a-select-option :value="1">启用</a-select-option>
          <a-select-option :value="0">禁用</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="模板公式" name="modelCalcFormula">
        <a-input
            v-model:value="form.modelCalcFormula"
            class="formInput"
            placeholder="模板计算公式"
            disabled
        />
      </a-form-item>

      <a-form-item label="属性值" name="parseAttrName">
        <a-input
            v-model:value="form.parseAttrName"
            class="formInput"
            placeholder="属性值"
        />
        <a-button class="buttonBar" type="primary" @click="parseFunc" :loading="parseFunLoading"> 解析</a-button>
      </a-form-item>
      <a-form-item label="解析结果" name="parseValue">
        <a-tooltip placement="right" >
          <template #title v-show="form.parseValue !== null">{{form.parseValue}}</template>
          <a-input v-model:value="form.parseValue" class="formInput" placeholder="解析值"></a-input>
        </a-tooltip>
      </a-form-item>
    </a-form>
      <template #footer>
        <div class="footerBar">
          <a-button key="back" @click="cancel">取消</a-button>
          <a-button
              key="submit"
              type="primary"
              :loading="loading"
              @click="handleSubmit"
          >确认</a-button
          >
        </div>
      </template>
  </a-modal>

</template>
<script setup>
// 

const $api = inject("$api")
const props = defineProps({
  updateValueVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
});

const title = ref(null)
const loading = ref(false)
const parseFunLoading = ref(false)
const emits = defineEmits(["update:updateValueVisible","getParamDetailPage"])
const labelCol = { style: { width: "100px" } }
const formRef = ref(null)
const form = ref({
  value: null,
  calcFormula: null,
  enable: null,
  modelCalcFormula: null,
  parseAttrName: null,
  parseValue: null
})

watch(()=>props.updateValueVisible, (val) => {
  if (val) {
    title.value = '参数修改-' + props.rowData.paramName
    form.value.value = props.rowData.value
    form.value.calcFormula = props.rowData.calcFormula
    form.value.enable = props.rowData.enable
    form.value.modelCalcFormula = props.rowData.modelCalcFormula
  }
},{deep:true})

const cancel = () => {
  emits("update:updateValueVisible", false);
  form.value.value = null
  form.value.calcFormula = ref(null)
  form.value.enable = null
  form.value.modelCalcFormula = null
  form.value.parseAttrName = null
  form.value.parseValue = null
};
const handleSubmit = async () => {
  const params = {
    id: props.rowData.id,
    value: form.value.value,
    calcFormula: form.value.calcFormula,
    enable: form.value.enable,
  }
  const res = await $api.updateParamDetail(params)
  if (res && res.code === 0) {
    message.success('更新成功')
    emits("getParamDetailPage")
    cancel()
  }
}
const parseFunc =async ()=>{
  parseFunLoading.value = true
  const params = {
    attrName: form.value.parseAttrName,
    id: props.rowData.id
  }
  const res = await $api.parseFunc(params)
  if (res && res.code === 0) {
    form.value.parseValue = res.data
    parseFunLoading.value = false
    form.value.calcFormula = form.value.calcFormula.replace(form.value.parseAttrName,res.data)
    message.success('解析成功')
  }
}

</script>
<style scoped>
.form {
  padding: 0 40px;
  margin-top: 30px;
}
.formInput,
.formSelect {
  width: 300px;
}
.ant-form-item {
  margin-top: 20px;
}
.buttonBar {
  margin-left: 10px;
}
.footerBar {
  text-align: center;
  margin-top: 30px;
}
.areaSelectContent {
  display: inline-block;
}
.areaSelectContent {
  display: inline-block;
}
.areaSelect {
  display: inline-block;
  width: 113px;
  margin-right: 5px;
  &:last-child {
    margin-right: 0;
  }
}
.addChildBtn{
  position: relative;
  left: 10px
}
</style>